<%-- 
    Document   : ShopServiceList
    Created on : 22 ?.?. 2554, 13:37:53
    Author     : SUNTIPARB
--%>
<%-- Form Function --%>

<script type="text/javascript">


    $(document).ready(function() {

        $("#formSearch").find("input, textarea, select, button").uniform();
        $("#btnReset").click(function(){
            $("#formSearch").get(0).reset();
            $("#btnSubmit").attr("disabled",false); flAuto = false; // When has auto search
            $.uniform.update(" input, textarea, select, button");
            return false});

        $("#formSearch").validate({
            submitHandler: function(form) {
                gridReload();
                //$(form).ajaxSubmit();
            }
        });
        var options = {
            target:        '#output1',   // target element(s) to be updated with server response
            beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse  // post-submit callback

            // other available options:
            //url:       url         // override for form's 'action' attribute
            //type:      type        // 'get' or 'post', override for form's 'method' attribute
            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
            //clearForm: true        // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit

            // $.ajax options can be used here too, for example:
            //timeout:   3000
        };

        // bind form using 'ajaxForm'
        $('#formSearch').ajaxForm(options);
    });

    // pre-submit callback
    function showRequest(formData, jqForm, options) {
        // formData is an array; here we use $.param to convert it to a string to display it
        // but the form plugin does this for you automatically when it submits the data
        var queryString = $.param(formData);

        // jqForm is a jQuery object encapsulating the form element.  To access the
        // DOM element for the form do this:
        // var formElement = jqForm[0];

        alert('About to submit: \n\n' + queryString);

        // here we could return false to prevent the form from being submitted;
        // returning anything other than false will allow the form submit to continue
        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form)  {
        // for normal html responses, the first argument to the success callback
        // is the XMLHttpRequest object's responseText property

        // if the ajaxForm method was passed an Options Object with the dataType
        // property set to 'xml' then the first argument to the success callback
        // is the XMLHttpRequest object's responseXML property

        // if the ajaxForm method was passed an Options Object with the dataType
        // property set to 'json' then the first argument to the success callback
        // is the json data object returned by the server

        alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
            '\n\nThe output div should have already been updated with the responseText.');
    }
</script>
<%-- End Form Function --%>

<%-- jQGrid Init --%>
<script type="text/javascript">

    jQuery.extend($.fn.fmatter , {

        imageButtonFormatter : function imageButtonFormatter(cellvalue, options, rowdata) {

            return  "<a href=\"#\" ><img src='<%=request.getContextPath()%>/images/view_icon.gif' /></a> " ;
        }
    });
    jQuery.extend($.fn.fmatter.imageButtonFormatter , {

        unformat : function(cellvalue, options) {
            return cellvalue;
        }
    });

</script>


<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $("#grid").jqGrid({
                url:'<%=request.getContextPath()%>/SRV/ShopServiceList/grd_search',
                datatype: 'json',
                mtype: 'POST',
                colNames:['Id', 'Product Name', 'Price', 'Currency', 'Category', 'Shop Name','Select'],
                colModel:[
                    {name:'ID',index:'id', width:55,sortable:false},
                    {name:'name',index:'name,sortable:false'},
                    {name:'price',index:'price', width:150,sortable:false},
                    {name:'currency',index:'currency', width:85,sortable:false},
                    {name:'category',index:'category', width:200,sortable:false},
                    {name:'shopName',index:'shopName', width:200,sortable:false},
                    {name:'Detail',index:'Detail', align:'center', width:100, sortable:false,formatter:'imageButtonFormatter'}
                ],
                postData: {
                },
                rowNum:20,
                rowList:[20,40,60],
                height: 200,
                width: 940,
                rownumbers: true,
                pager: '#pager',
                sortname: 'id',
                viewrecords: true,
                sortorder: "asc",
                caption:"Product",
                emptyrecords: "Empty records",
                loadonce: true,
                loadComplete: function() {

                },
                jsonReader : {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: true, //if 'false' will chage json reader format to 'name' require
                    //cell: "cell",
                    id: "0" //id: "id"
                }
            });

            $("#grid").jqGrid('navGrid','#pager',
            {edit:false,add:false,del:false,search:false},
            { },
            { },
            { },
            {
                sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
                closeOnEscape: true,
                multipleSearch: true,
                closeAfterSearch: true }
        );

        }
    );
    });
    //jQuery("#grid").setGridWidth(800, true)
</script>
<%-- End jQGrid Init --%>

<%-- jQGrid Search Function --%>
<script type="text/javascript">
    function gridReload(){
        var txtName = jQuery("#txtName").val();
        var txtPrice = jQuery("#txtPrice").val();
        var txtCurrency = jQuery("#txtCurrency").val();
        var txtDoctorName = jQuery("#txtDoctorName").val();
        jQuery("#grid").jqGrid('setGridParam'
        ,{url:"<%=request.getContextPath()%>/SRV/ShopServiceList/grd_search"
                +"?txtName="+txtName
                +"&txtPrice="+txtPrice
                +"&txtCurrency="+txtCurrency
                +"&txtDoctorName="+txtDoctorName
            ,page:1}).trigger("reloadGrid");
    }
</script>
<%-- End jQGrid Search Function --%>

<div class="grid_16">

    <!-- insert content here -->

    <form id="formSearch" class="form" action="" method="">
        <table class="bgTable">

            <tr >
                <td colspan="4" class="bgheader" ><h5>Search Product</h5></td>
            </tr>
            <tr >
                <td colspan="4" class="bgtop" >&nbsp;</td>
            </tr>
            <tr >
                <td  class="bgCellNormal">Product Name ::&nbsp;</td>
                <td class="bgCellInput"><input type="text" name="txtName" id="txtName" class="" value="" /></td>
                <td  class="bgCellNormal">Product Currency ::&nbsp;</td>
                <td  class="bgCellInput"><input type="text" name="txtCurrency" id="txtCurrency" class="" value="" /></td>
            </tr>
            <tr>
                <td class="bgCellNormal" >Product Price ::&nbsp;</td>
                <td class="bgCellInput" ><input type="text" name="txtPrice" id="txtPrice" class="" value="" /></td>
                <td class="bgCellNormal"  >Shop name ::&nbsp;</td>
                <td class="bgCellInput" ><input type="text" name="txtShopName" id="txtShopName" class="" value="" /></td>
            </tr>
            <tr>
                <td class="bgCellNormal" >Product Category ::&nbsp;</td>
                <td class="bgCellInput" ><input type="text" name="txtCategory" id="txtCategory" class="" value="" /></td>
                <td class="bgCellNormal" ></td>
                <td class="bgCellInput" ></td>
            </tr>
            <tr>
                <td colspan="4"  class="bgbutton">
                   <input type="reset" name="btnReset" id="btnReset" value="Reset" /> &nbsp;&nbsp;
                   <input type="submit" name="btnSubmit" id="btnSubmit" value="Search" />
                </td>
            </tr>
        </table>
    </form>
    <br />
    <div id="content-placeholder">

        <div id="jqgrid">
            <table id="grid"></table>
            <div id="pager"></div>
        </div>

        <div id="dialog" title="Feature not supported" style="display:none">
            <p>That feature is not supported.</p>
        </div>

        <div id="dialogSelectRow" title="Warning" style="display:none">
            <p>Please select row</p>
        </div>
    </div>
</div>
